<template>
	<view class="uv-page">
		<view>
			<uv-cell-group>
				<uv-cell
					@click="showCalendar(index)"
					:title="item.title"
					v-for="(item, index) in list"
					:key="index"
					:label="values[index]"
					isLink
				>
				<template v-slot:icon>
					<image
						class="uv-cell-icon"
						:src="item.iconUrl"
						mode="widthFix"
					></image>
				</template>
				</uv-cell>
			</uv-cell-group>
			<view style="margin: 30rpx -15px;">
				<uv-calendars
					v-if="show"
					:insert="true"
					:lunar="true"
					start-date="2021-01-01"
					end-date="2030-01-01"
					@change="confirm"
				/>
			</view>
			<uv-calendars
				ref="calendar2"
				@confirm="confirm"
			/>
			<uv-calendars
				ref="calendar3"
				mode="multiple"
				@confirm="confirm"
			/>
			<uv-calendars
				ref="calendar4"
				mode="range"
				@confirm="confirm"
			/>
			<uv-calendars
				ref="calendar5"
				mode="range"
				:date="date5"
				color="#f56c6c"
				confirm-color="#f56c6c"
				@confirm="confirm"
			/>
			<uv-calendars
				ref="calendar6"
				mode="range"
				title="选择日期"
				start-text="住店"
				end-text="离店"
				:selected="selected"
				@confirm="confirm"
			/>
			<uv-calendars
				ref="calendar7"
				:startDate="startDate"
				:endDate="endDate"
				@confirm="confirm"
			/>
			<uv-calendars
				ref="calendar8"
				lunar
				@confirm="confirm"
			/>
			<uv-calendars
				ref="calendar9"
				:date="defaultDate"
				@confirm="confirm"
			/>
			<uv-calendars
				ref="calendar10"
				mode="multiple"
				:date="date10"
				@confirm="confirm"
			/>
			<uv-calendars
				ref="calendar11"
				mode="range"
				:date="date11"
				@confirm="confirm"
			/>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			const d = new Date()
			const year = d.getFullYear()
			let month = d.getMonth() + 1
			month = month < 10 ? `0${month}` : month
			const date = d.getDate()
			return {
				show: false,
				index: 0,
				values: ['','','','','','','',''],
				startDate: `${year}-${month}-02`,
				endDate: `${year}-${month}-20`,
				selected: [{date: `${year}-${month}-02`, info: '签到', badge: true, infoColor: '#ff0000'},{date: `${year}-${month}-06`, info: '余10',infoColor: '#19be6b', topinfo: '￥100', topinfoColor: '#19be6b'}],
				defaultDate: `${year}-${month}-15`,
				date5: [`${year}-${month}-08`,`${year}-${month}-20`],
				date10: [`${year}-${month}-08`,`${year}-${month}-16`,`${year}-${month}-24`],
				date11: [`${year}-${month}-08`,`${year}-${month}-20`],
				list: [{
						title: '插入模式',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png'
					},
					{
						title: '单个日期',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/7.png'
					},
					{
						title: '多个日期',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/8.png'
					},
					{
						title: '日期范围',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/9.png'
					},
					{
						title: '自定义主题颜色',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/15.png'
					},{
						title: '自定义文案',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/14.png'
					},{
						title: '限制日期选择范围',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/13.png'
					},{
						title: '显示农历',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/5.png'
					},{
						title: '默认单个日期',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png'
					},{
						title: '默认多个日期',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png'
					},{
						title: '默认日期范围',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png'
					}
				]
			}
		},
		methods: {
			showCalendar(index) {
				this.index = index + 1
				if(this.index == 1) {
					return this.show = !this.show;
				}
				this.$refs[`calendar${this.index}`].open();
			},
			confirm(e) {
				let time = null;
				if(e.range.before && e.range.after) {
					time = `${e.range.before} 至 ${e.range.after}`;
				} else if(e.multiple.data.length) {
					time = e.multiple.data.length>1?`${e.multiple.data[0]}等多个日期`:e.multiple.data[0];
				} else {
					time = e.fulldate;
				}
				uni.showToast({
					icon: 'none',
					title: time
				})
			}
		}
	}
</script>
